import { Link, useNavigate } from "react-router-dom";
import { Button, Form, Input, Toast } from "antd-mobile";
import Logo from "../components/logo";
import { regAPI } from "../services/auth.js";
import { setToken } from "../utils/tools";

function Reg() {
  const nav = useNavigate();
  return (
    <div className="login">
      <Logo />
      <Form
        onFinish={(v) => {
          console.log(v);
          if (v.password == v.repassword) {
            regAPI({ userName: v.userName, password: v.password }).then(
              (res) => {
                setToken(res.data);
                nav("/");
              }
            );
          } else {
            Toast.show("两次输入的密码不一致");
          }
        }}
      >
        <Form.Item
          label="用户名"
          name="userName"
          rules={[
            {
              required: true,
              message: "用户名不能为空",
            },
          ]}
        >
          <Input placeholder="请输入用户名" />
        </Form.Item>
        <Form.Item
          label="密码"
          name="password"
          rules={[
            {
              required: true,
              message: "密码不能为空",
            },
          ]}
        >
          <Input type="password" placeholder="请输入密码" />
        </Form.Item>
        <Form.Item
          label="确认密码"
          name="repassword"
          rules={[
            {
              required: true,
              message: "密码不能为空",
            },
          ]}
        >
          <Input type="password" placeholder="请再次输入密码" />
        </Form.Item>
        <Button type="submit" color="primary" block>
          登录
        </Button>
      </Form>
      <Link to="/login">已有账号，我要登录</Link>
    </div>
  );
}

export default Reg;
